<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui"
template="/template/common/commonLayout.xhtml">
 
<ui:define name="content">
<h:form>
	<table>
		<tbody>
			<tr>
				<td> 
				<h:commandLink value="Accueil" action="default"/> 
				</td>
				<td> 
				<h:outputText value=" > "/> 
				</td>
				<td> 
				<h:commandLink value="Inscription" action="FormInscription"/> 
				</td>
			</tr>
		</tbody>
	</table>
	</h:form>

<h:form id="client">
    <p:growl id="growl" sticky="true" showDetail="true"/>
	<p:wizard widgetVar="wiz"
			flowListener="#{userWizard.onFlowProcess}">
	
		<p:tab id="personal" title="Identité">

			<p:panel header="Détails Personnels">
			  <div align="center">
				<table>
					<TBODY>
						<tr>
							<td>
								<div align="right">
									<h:outputText value="Nom : *" />
								</div>
							</td>
							<td>
								<p:inputText required="true" value="#{userWizard.user.lastname}" label="nom" id="nom"/>
							</td>
							<td>
								<p:message for="nom" />
							</td>
						</tr>
						<tr>
							<td>
								<div align="right">
									<h:outputText value="Prénom: *" />
								</div>
							</td>
							<td>
								<p:inputText required="true" value="#{userWizard.user.firstname}" label="prenom" id="prenom"/>
							</td>
							<td>
								<p:message for="prenom"/>
							</td>
						</tr>
						<tr>
							<td>
								<div align="right">
									<h:outputText value="Mot de Passe: *" />
								</div>
							</td>
							<td>
								<p:password value="#{userWizard.user.password}" required="true" label="mot_de_passe" id="mdp"/>
							</td>
							<td>
								<p:message for="mdp"/>
							</td>
						</tr>
						<tr>
							<td>
								<div align="right">
									 <h:outputText value="Confirmer MdP: *" />
								</div>
							</td>
							<td>
								<p:password  required="true" label="comfirmMdP" id="cmdp" feedback="false">
					  			<f:validator validatorId="org.webapp.managedBeans.PasswordValidator"/>
								</p:password>
							</td>
							<td>
								<p:message for="cmdp"/>
							</td>
						</tr>
						<tr>
							<td>
								<div align="right">
									 <h:outputText value="Sexe: " />	
								</div>
							</td>
							<td>
								<h:selectOneMenu id="sexe" value="#{userWizard.user.gender}" label="sexe">
									<f:selectItem  itemValue="Male" />
									<f:selectItem itemValue="Female" />
								</h:selectOneMenu>
							</td>
							<td>
								<p:message for="sexe"/>
							</td>
						</tr>	
						
						<tr>
							<td>
								<div align="right">		
									<h:outputText value="Date de Naissance: "/>							 	
								</div>
							</td>
							<td>
								<p:calendar value="#{userWizard.user.dateOfBirth}" label="dateNaisance"
					           	 locale="fr" navigator="true" effect="slideDown" id="dn"/>
							</td>
							<td>
								<p:message for="dn"/>
							</td>
						</tr>
						<tr>
							<td>
								<div align="right">	
									<h:outputText value="Skip to last: " />
								</div>
							</td>
							<td>
								<h:selectBooleanCheckbox value="#{userWizard.skip}" />
							</td>
						</tr>					
					</TBODY>
				</table>	
				</div>	
				<!-- <h:panelGrid columns="3" columnClasses="label, value, error" styleClass="grid">
					<h:outputText value="Nom : *" />
					<p:inputText required="true" value="#{userWizard.user.firstname}" label="nom" id="nom"/>
					<p:message for="nom" />
					
					<h:outputText value="Prénom: *" />
					<p:inputText required="true" value="#{userWizard.user.lastname}" label="prenom" id="prenom"/>
					<p:message for="prenom"/>
					
					<h:outputText value="Mot de Passe: *" />
					<p:password value="#{userWizard.user.password}" required="true" label="mot_de_passe" id="mdp"/>
                    <p:message for="mdp"/>
                    
                    <h:outputText value="Confirmer MdP: *" />
					<p:password  required="true" label="comfirmMdP" id="cmdp" feedback="false">
					  <f:validator validatorId="org.webapp.managedBeans.PasswordValidator"/>
					</p:password>
                    <p:message for="cmdp"/>
					
					<h:outputText value="Sexe: " />	
					<h:selectOneMenu id="sexe" value="#{userWizard.user.gender}" label="sexe">
						<f:selectItem  itemValue="Male" />
						<f:selectItem itemValue="Female" />
					</h:selectOneMenu>
					<p:message for="sexe"/>
					
					<h:outputText value="Date de Naissance: "/>
					<p:calendar value="#{userWizard.user.dateOfBirth}" label="dateNaisance"
					            locale="fr" navigator="true" effect="slideDown" id="dn"/>
					<p:message for="dn"/>
					
					<h:outputText value="Skip to last: " />
					<h:selectBooleanCheckbox value="#{userWizard.skip}" />
										
				</h:panelGrid> -->
			</p:panel>
		</p:tab>
			
		<p:tab id="address" title="Adresse">
			<p:panel header="Details Adresse">	
			<div align="center">
				<table>
					<TBODY>
						<tr>
							<td>
								<div align="right">
								<h:outputText value="Rue: " />
								</div>
							</td>
							<td>
								<p:inputText value="#{userWizard.address.street1}" />
							</td>
						</tr>
						<tr>
							<td>
								<div align="right">
								<h:outputText value="Code Postal: " />
								</div>
							</td>
							<td>
								<p:inputText value="#{userWizard.address.zipCode}" />
							</td>
						</tr>
						<tr>
							<td>
								<div align="right">
								<h:outputText value="Ville: " />
								</div>
							</td>
							<td>
								<p:inputText value="#{userWizard.address.city}" />
							</td>
						</tr>
						<tr>
							<td>
								<div align="right">
								<h:outputText value="Pays: " />	
								</div>
							</td>
							<td>
								<p:inputText value="#{userWizard.address.country}" />
							</td>
						</tr>
						<tr>
							<td>
								<div align="right">
								<h:outputText value="Skip to last: " />
								</div>
							</td>
							<td>
								<h:selectBooleanCheckbox value="#{userWizard.skip}" />
							</td>
						</tr>
					</TBODY>
				</table>			
				<!-- <h:panelGrid columns="2" columnClasses="label, value">
					<h:outputText value="Rue: " />
					<p:inputText value="#{userWizard.address.street1}" />
					
					<h:outputText value="Code Postal: " />
					<p:inputText value="#{userWizard.address.zipCode}" />
					
					
					<h:outputText value="Ville: " />
					<p:inputText value="#{userWizard.address.city}" />
					
					<h:outputText value="Pays: " />
					<p:inputText value="#{userWizard.address.country}" />
					
					<h:outputText value="Skip to last: " />
					<h:selectBooleanCheckbox value="#{userWizard.skip}" />
				</h:panelGrid> -->
				</div>
			</p:panel>
		</p:tab>
			
		<p:tab id="contact" title="Contacts">
			<p:panel header="Vos Contacts">
				<div align="center">
					<table>
						<TBODY>
							<tr>
								<td>
									<div align="right">
										<h:outputText value="Email: *" />
									</div>									
								</td>
								<td>
									<p:inputText required="true" label="Email" id="email"
											value="#{userWizard.user.email}">
										<f:validator validatorId="org.webapp.managedBeans.EmailValidator"/>
									</p:inputText>
								</td>
								<td>
									<p:message for="email" />
								</td>
							</tr>
							<tr>
								<td>
									<div align="right">
										<h:outputText value="Téléphone: " />
									</div>									
								</td>
								<td>
									<p:inputText value="#{userWizard.user.telephone}" id="phone"/>
								</td>
								<td>
									<p:message for="phone"  />
								</td>
							</tr>
						</TBODY>
					</table>
				</div>
				<!-- <h:panelGrid columns="3" columnClasses="label, value, error">
					<h:outputText value="Email: *" />
					<p:inputText required="true" label="Email" id="email"
							value="#{userWizard.user.email}">
					<f:validator validatorId="org.webapp.managedBeans.EmailValidator"/>
					</p:inputText>
					<p:message for="email" />
					
					<h:outputText value="Téléphone: " />
					<p:inputText value="#{userWizard.user.telephone}" id="phone"/>
					<p:message for="phone"  />
				</h:panelGrid> -->
			</p:panel>
		</p:tab>
			
		<p:tab id="confirm" title="confirmation">
			<p:panel header="Confirmation">
				<div align="center">
					<TABLE>
						<TBODY>
							<tr>
								<td>
									<DIV align="right">
										<h:outputText value="Nom: " />
									</DIV>
								</td>
								<td>
								<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.firstname}" />
								</td>
							</tr>
							<tr>
								<td>
									<DIV align="right">
										<h:outputText value="Prenom: " />
									</DIV>
								</td>
								<td>
								<h:outputText  styleClass="outputLabel"
								value="#{userWizard.user.lastname}"/>
								</td>
							</tr>
							<tr>
								<td>
									<DIV align="right">
									<h:outputText value="Sexe: " />
									</DIV>
								</td>
								<td>
								<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.gender}" />
								</td>
							</tr>
							<tr>
								<td>
									<DIV align="right">
									<h:outputText value="Date de Naissance: " />
									</DIV>
								</td>
								<td>
								<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.dateOfBirth}">
									<f:convertDateTime pattern="d/M/yyyy" />
								</h:outputText>
								</td>
							</tr>
							<tr>
								<td>
									<DIV align="right">
									<h:outputText value="Rue: " />
									</DIV>
								</td>
								<td>
								<h:outputText styleClass="outputLabel"
								value="#{userWizard.address.street1}" />
								</td>
							</tr>
							<tr>
								<td>
									<DIV align="right">
									<h:outputText value="Code Postal: " />
									</DIV>
								</td>
								<td>
								<h:outputText styleClass="outputLabel"
								value="#{userWizard.address.zipCode}" />
								</td>
							</tr>
							<tr>
								<td>
									<DIV align="right">
									<h:outputText value="Ville: " />
									</DIV>
								</td>
								<td>
								<h:outputText styleClass="outputLabel"
								value="#{userWizard.address.city}" />
								</td>
							</tr>
							<tr>
								<td>
									<DIV align="right">
									<h:outputText value="Pays: " />
									</DIV>
								</td>
								<td>
								<h:outputText styleClass="outputLabel"
								value="#{userWizard.address.country}" />
								</td>
							</tr>
							<tr>
								<td>
									<DIV align="right">
									<h:outputText value="Email: " />
									</DIV>
								</td>
								<td>
								<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.email}" />
								</td>
							</tr>
							<tr>
								<td>
									<DIV align="right">
									<h:outputText value="Téléphone " />
									</DIV>
								</td>
								<td>
								<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.telephone}"/>
								</td>
							</tr>
						</TBODY>
					</TABLE>
				</div>
				<!-- <h:panelGrid id="confirmation" columns="2">
					<h:outputText value="Nom: " />
					<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.firstname}" />
					
					<h:outputText value="Prenom: " />
					<h:outputText  styleClass="outputLabel"
								value="#{userWizard.user.lastname}"/>
					
					<h:outputText value="Sexe: " />
					<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.gender}" />
								
                    <h:outputText value="Date de Naissance: " />
					<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.dateOfBirth}">
					<f:convertDateTime pattern="d/M/yyyy" />
					</h:outputText>
					
					<h:outputText value="Rue: " />
					<h:outputText styleClass="outputLabel"
								value="#{userWizard.address.street1}" />
					
					<h:outputText value="Code Postal: " />
					<h:outputText styleClass="outputLabel"
								value="#{userWizard.address.zipCode}" />
					
					<h:outputText value="Ville: " />
					<h:outputText styleClass="outputLabel"
								value="#{userWizard.address.city}" />
								
					<h:outputText value="Pays: " />
					<h:outputText styleClass="outputLabel"
								value="#{userWizard.address.country}" />
					
					<h:outputText value="Email: " />
					<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.email}" />
					
					<h:outputText value="Téléphone " />
					<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.telephone}"/>

				</h:panelGrid> -->
				<div align="right">
				<p:commandButton value="Submit" update="growl" 
							actionListener="#{userWizard.save}"/>
				</div>
			</p:panel>
		</p:tab>
		
	</p:wizard>
	
	<p:ajaxStatus>
		<f:facet name="start">
			<h:graphicImage value="../design/ajaxloading.gif" />
		</f:facet>
		
		<f:facet name="complete">
			<h:outputText value="" />
		</f:facet>
	</p:ajaxStatus>
							
</h:form>
</ui:define>
</ui:composition>
